<template>
	<a-card :bordered="false">

		<!-- 查询区域 -->
		<div class="table-page-search-wrapper">
			<a-form layout="inline" @keyup.enter.native="searchQuery">
				<a-row :gutter="24">
					<template>
            <a-col :md="6" :sm="8">
              <a-form-item label="任务名称查询">
                <a-input placeholder="请输入任务名称查询" v-model="queryParam.name"></a-input>
              </a-form-item>
            </a-col>
						<a-col :md="6" :sm="8">
							<a-form-item label="摄像机名称查询">
								<a-input placeholder="请输入摄像机名称查询" v-model="queryParam.cameraName"></a-input>
							</a-form-item>
						</a-col>

<!--						<a-col :md="6" :sm="8">-->
<!--							<a-form-item label="手机号码">-->
<!--								<a-input placeholder="请输入手机号码查询" v-model="queryParam.mobile"></a-input>-->
<!--							</a-form-item>-->
<!--						</a-col>-->
<!--						<a-col :md="6" :sm="8">-->
<!--							<a-form-item label="所属域:">-->
<!--								<a-select placeholder="请选择所属域" showSearch showArrow optionFilterProp="children"-->
<!--									:getPopupContainer="(node) => node.parentNode" :defaultActiveFirstOption="false" v-model="queryParam.cameraRegionId">-->
<!--									<a-select-option v-for="item in regionIdList" :key="item.rescueId"-->
<!--										:value="item.regionId">{{item.regionId}}</a-select-option>-->
<!--								</a-select>-->
<!--							</a-form-item>-->
<!--						</a-col>-->
					</template>

					<a-col :md="6" :sm="8">
						<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
							<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
							<a-button type="primary" @click="resetParam" icon="reload" style="margin-left: 8px">重置
							</a-button>
						</span>
					</a-col>

				</a-row>
			</a-form>
		</div>

		<!-- 操作按钮区域 -->
		<div class="table-operator" style="border-top: 5px">
			<a-button @click="addDevRecordTask" type="primary" icon="plus">添加录像任务</a-button>
			<a-dropdown v-if="selectedRowKeys.length > 0">
				<a-menu slot="overlay" @click="handleMenuClick">
					<a-menu-item key="1">
						<a-icon type="delete" @click="batchDel" />
						删除
					</a-menu-item>
          <a-menu-item key="2">
            <a-icon type="delete" @click="batchRunStart" />
            启用
          </a-menu-item>
          <a-menu-item key="3">
            <a-icon type="delete" @click="batchRunStop" />
            停用
          </a-menu-item>
				</a-menu>
				<a-button style="margin-left: 8px">
					批量操作
					<a-icon type="down" />
				</a-button>
			</a-dropdown>
		</div>

		<!-- table区域-begin -->
		<div>
			<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
				<i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a
					style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
				<a style="margin-left: 24px" @click="onClearSelected">清空</a>
			</div>

			<a-table ref="table" bordered size="middle" rowKey="taskId" :columns="columns" :dataSource="dataSource"
				:pagination="ipagination" :loading="loading"
				:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
				@change="handleTableChange">

				<template slot="avatarslot" slot-scope="text, record">
					<div class="anty-img-wrap">
						<a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user" />
					</div>
				</template>

				<span slot="action" slot-scope="text, record">
					<a @click="handleEdit(record)" :disabled="record.quickFlag">编辑</a>
					<a-divider type="vertical" />
          <a @click="handleDetail(record)">详情</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定启用吗?" v-if="record.used == 0" @confirm="() => changeUsed(record)">
            <a>启用</a>
          </a-popconfirm>
          <a-popconfirm title="确定停用吗?" v-if="record.used == 1" @confirm="() => changeUsed(record)">
            <a>停用</a>
          </a-popconfirm>
          <a-divider type="vertical" />
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.taskId)">
            <a>删除</a>
          </a-popconfirm>
				</span>


			</a-table>
		</div>
		<!-- table区域-end -->
    <record-task-modal ref="modalForm" @ok="modalFormOk"></record-task-modal>
	</a-card>
</template>	

<script>
	import { getFileAccessHttpUrl } from '@/api/manage';
	import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import {
    getAction,
    postAction
  } from '@/api/manage'
	import JInput from '@/components/jeecg/JInput'
	import RecordTaskModal from './modules/RecordTaskModal'

	export default {
		name: "DevRecordList",
		mixins: [JeecgListMixin],
		components: {
			JInput,
      RecordTaskModal
		},
		data() {
			return {
				description: '这是用户管理页面',
        queryParam: {
          name: '',
          cameraName: '',
          cameraRegionId: ''
				},
        regionIdList: [{
            regionId: "44010200492000000001",
					},
          {
            regionId: "4401020049",
          },
				],
				recycleBinVisible: false,
				columns: [
					/*{
					  title: '#',
					  dataIndex: '',
					  key:'rowIndex',
					  width:60,
					  align:"center",
					  customRender:function (t,r,index) {
					    return parseInt(index)+1;
					  }
					},*/
          {
            title: '任务名称',
            align: "center",
            dataIndex: 'name',

          },
					{
						title: '摄像机名称',
						align: "center",
						dataIndex: 'cameraName',

					},
					{
						title: '任务类型',
						align: "center",
						dataIndex: 'typeId',
            customRender: function(text) {
              if (text == 4) {
                return "长期"
              } else if (text == 3) {
								return "天"
							} else if (text == 2) {
								return "周"
							} else if (text == 1) {
								return "月"
							} else if (text == 0) {
								return "单次"
							}
            }
					},
					{
						title: '状态',
						align: "center",
						dataIndex: 'taskState',
						customRender: function(text) {
              if (text == 1) {
                return "禁用"
              } else if (text == 2) {
								return "等待"
							} else if (text == 3) {
								return "运行中"
							} else if (text == 4) {
								return "异常"
							} else if (text == 5) {
								return "已结束"
							}
						}
					},
          // {
          //   title: '周期信息',
          //   align: "center",
          //   dataIndex: 'cycleInfo',
          //   customRender: function(text) {
          //     if (!text) {
          //       return "--"
          //     }
          //   }
          // },
          // {
          //   title: '是否启用',
          //   align: "center",
          //   dataIndex: 'used',
          //   customRender: function(text) {
          //     if (text == 0) {
          //       return "停用"
          //     } else if (text == 1) {
          //       return "启用"
          //     }
          //   }
          // },
          {
            title: '域信息',
            align: "center",
            // dataIndex: 'cameraRegionId',
            dataIndex: 'regionName'
          },
          {
            title: '开始时间',
            align: "center",
            dataIndex: 'startDateTime',
            customRender: function(startDateTime, listDataSource) {
              if (listDataSource.typeId == 0) {
                return startDateTime;
              } else if (listDataSource.typeId == 4) {
                return startDateTime;
              }
            }
          },
          {
            title: '结束时间',
            align: "center",
            dataIndex: 'endDateTime',
            customRender: function(endDateTime, listDataSource) {
              if (listDataSource.typeId == 0) {
                return endDateTime;
              } else if (listDataSource.typeId == 4) {
                return '--';
              }
            }
          },
          {
            title: '更新时间',
            align: "center",
            dataIndex: 'updateTime',
          },
          {
            title: '创建时间',
            align: "center",
            dataIndex: 'createTime',
          },
					{
						title: '操作',
						dataIndex: 'action',
						scopedSlots: {
							customRender: 'action'
						},
						align: "center",
					}

				],
				url: {
					list: "/record/page",
					delete: "/record/delete",
					deleteBatch: "/record/delete-batch",
          changeUsed: "/record/used",
          runUsedBatch: "/record/used/batch",
				},
			}
		},
		computed: {
			importExcelUrl: function() {
				return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
			}
		},
		methods: {
			getAvatarView: function(avatar) {
				return getFileAccessHttpUrl(avatar)
			},
			handleMenuClick(e) {
				if (e.key == 1) {
					this.batchDel();
				}
        if (e.key == 2) {
          this.batchRunStart();
        }
        if (e.key == 3) {
          this.batchRunStop();
        }
			},
			changeUsed(record) {
        getAction(this.url.changeUsed+'/'+record.taskId).then((res) => {
          if (res.code == "00000") {
            this.loadData();
          } else {
            this.$message.warning(res.msg);
          }
        })
			},
			resetParam() {
				this.queryParam = {}
				this.queryParam.cameraRegionId = ''
				this.loadData(1)
			},
      // **************************************************************************************************************
      // 新增录像配置
      addDevRecordTask() {
        console.log(this.$parent)
        // 关闭指定tab页面
        this.$parent.closeRouteViewTab('/record/addrecordtask')
        // 打开指定tab页面
        this.$router.push({
          // 路由页面
          name: '/record/addrecordtask',
          // 路由参数传递
          params: {
          }
        })
      },
      //查看录像配置
      goDevChannelRecord(record) {
        console.log(this.$parent)
        // 关闭指定tab页面
        this.$parent.closeRouteViewTab('/record/devchannelrecord')
        // 打开指定tab页面
        this.$router.push({
          // 路由页面
          name: '/record/devchannelrecord',
          // 路由参数传递
          params: {
            dev: record
          }
        })
      },
      batchRunStart(type) {
        if (!this.url.runUsedBatch) {
          this.$message.error("请设置url.runUsedBatch属性!")
          return
        }
        if (this.selectedRowKeys.length <= 0) {
          this.$message.warning('请选择一条记录！');
          return;
        } else {
          // var ids = "";
          console.log(this.selectedRowKeys)
          // for (var a = 0; a < this.selectedRowKeys.length; a++) {
          //   this.selectedRowKeys[a] = parseInt(this.selectedRowKeys[a])
          // }
          var that = this;
          this.$confirm({
            title: "确认启用",
            content: "是否启用选中数据?",
            onOk: function() {
              that.loading = true;
              let batchParam = {};
              if (type == 2) batchParam["ids"] = that.selectedRowKeys;
              else batchParam["idList"] = that.selectedRowKeys;
              batchParam["used"] = 1
              postAction(that.url.runUsedBatch, batchParam).then((res) => {
                if (res.code == "00000") {
                  let msg = "启用成功"
                  if (res.msg.toLowerCase() !== "ok") {
                    msg = res.msg;
                  }
                  that.$message.success(msg);
                  that.loadData();
                  that.onClearSelected();
                } else {
                  that.$message.warning(res.msg);
                }
              }).finally(() => {
                that.loading = false;
              });
            }
          });
        }
      },
      batchRunStop(type) {
        if (!this.url.runUsedBatch) {
          this.$message.error("请设置url.runUsedBatch属性!")
          return
        }
        if (this.selectedRowKeys.length <= 0) {
          this.$message.warning('请选择一条记录！');
          return;
        } else {
          // var ids = "";
          console.log(this.selectedRowKeys)
          // for (var a = 0; a < this.selectedRowKeys.length; a++) {
          //   this.selectedRowKeys[a] = parseInt(this.selectedRowKeys[a])
          // }
          var that = this;
          this.$confirm({
            title: "确认停用",
            content: "是否停用选中数据?",
            onOk: function() {
              that.loading = true;
              let batchParam = {};
              if (type == 2) batchParam["ids"] = that.selectedRowKeys;
              else batchParam["idList"] = that.selectedRowKeys;
              batchParam["used"] = 0
              postAction(that.url.runUsedBatch, batchParam).then((res) => {
                if (res.code == "00000") {
                  let msg = "停用成功"
                  if (res.msg.toLowerCase() !== "ok") {
                    msg = res.msg;
                  }
                  that.$message.success(msg);
                  that.loadData();
                  that.onClearSelected();
                } else {
                  that.$message.warning(res.msg);
                }
              }).finally(() => {
                that.loading = false;
              });
            }
          });
        }
      }
      // **************************************************************************************************************
		},

	}
</script>
<style scoped>
	@import '~@assets/less/common.less'
</style>
